<template>
    <div class="modal" v-show="$store.state.isOpenLogin">
        <div class="modal_bg" @click="closeLogin">
        </div>
        <div class="modal_content">
            <img class="close" @click="closeLogin" src="../assets/images/login/userArrow.png" alt="">
            <section>
                <span :class="{ active: showPheno }" @click="showPheno = true">手机号登录</span>
                <span :class="{ active: !showPheno }" @click="wechatLoginFn">微信扫码登录</span>
            </section>
            <div class="phoneLogin" v-show="showPheno">
                <div class="tanxin line">
                    <input placeholder="请输入手机号" type="text" v-model="phoneNum">
                </div>
                <!-- 验证码滑块(拼图) -->

                <div class="verify_box">
                    <slide-verify :l="42" :r="10" :w="360" :h="155" slider-text="向右滑动" @success="onSuccess"
                        @fail="onFail" @refresh="onRefresh"></slide-verify>
                    <div>{{ msg }}</div>
                </div>
                <div class="tanxin line">
                    <input placeholder="请输入验证码" type="text" v-model="smsNum">
                    <div class="btn" @click="getSmsNum">
                        <span v-if="isShowNum">获取验证码</span>
                        <span v-else class="daojis">{{ num }}s</span>
                    </div>
                </div>
                <div class="btn_login" @click="getLogin">登录</div>
            </div>
            <div id="weixin" v-show="!showPheno"></div>
        </div>
    </div>
</template>

<script>
// import Toast from '@/components/home/Toast.vue'
import { PhoneReginApi, sendSMSApi, bindWechatPhoneApi } from "../request/api"
export default {
    data() {
        return {
            msg: "",
            phoneNum: '18780468082',
            num: 60,
            isShowNum: true,
            smsNum: '4288',
            showPheno: true
        }
    },
    components: {
        // Toast
    }
    ,
    methods: {
        // 切换到微信登录
        wechatLoginFn() {
            this.showPheno = false;
            let _this = this;
            new WxLogin({
                id: "weixin",
                appid: "wx67cfaf9e3ad31a0d",  // 这个appid要填死
                scope: "snsapi_login",
                // 扫码成功后重定向的接口
                redirect_uri: "https://sc.wolfcode.cn/cms/wechatUsers/shop/PC",
                // state填写编码后的url
                state: encodeURIComponent(window.btoa(process.env.VUE_APP_STATE_URL + _this.$route.path)),
                // 调用样式文件
                href: "data:text/css;base64,LmltcG93ZXJCb3ggLnRpdGxlLCAuaW1wb3dlckJveCAuaW5mb3sNCiAgICBkaXNwbGF5OiBub25lOw0KfQ0KDQouaW1wb3dlckJveCAucXJjb2Rlew0KICAgIG1hcmdpbi10b3A6IDIwcHg7DQp9DQoNCg==",
            });
        },
        closeLogin() {
            this.$store.commit('changeIsLogin', false)
        },
        onSuccess() {
            this.msg = "验证成功";
        },
        onFail() {
            this.msg = "验证失败";
        },
        onRefresh() {
            this.msg = "再来一次";
        },
        async getSmsNum() {
            // 验证手机号
            let ret = /^(13[0-9]|14[01456789]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
            // if(正则对象.test(用户输入信息))
            if (!ret.test(this.phoneNum.trim())) {
                let toastObj = {
                    content: "请输入正确的手机号",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
                return
            }
            // 滑块验证
            if (this.msg != "验证成功") {
                let toastObj = {
                    content: "请将滑块拖到正确的位置",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
                return
            }

            let res = await sendSMSApi({
                phone: this.phoneNum
            })
            console.log(res);
            if (res.data.code === 0) {
                let toastObj = {
                    content: "获取验证码成功",
                    icon: "success",
                };
                this.$store.dispatch('AsncToast', toastObj)
                // 改变按钮状态
                this.isShowNum = false
                // 倒计时
                let iterm = setInterval(() => {
                    this.num--
                    if (this.num === 0) {
                        // ifnum=0清除倒计时并改变显示的按钮为获取验证码,并给num重新赋值
                        clearInterval(iterm)
                        this.isShowNum = true
                        this.num = 60
                    }
                }, 1000);
            } else {
                let toastObj = {
                    content: "小时发送受限,请一小时后在发送",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
            }


        },
        // 点击登录
        getLogin() {
            // console.log(111);
            if (this.phoneNum === '') {
                let toastObj = {
                    content: "手机号不能为空",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
                return
            }
            if (this.smsNum === '') {
                let toastObj = {
                    content: "验证码不能为空",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
                return
            }
            if (this.msg != "验证成功") {
                let toastObj = {
                    content: "请将滑块拖到正确的位置",
                    icon: "danger",
                };
                this.$store.dispatch('AsncToast', toastObj)
                return
            }
            let uuid = sessionStorage.getItem("uuid");
            if (uuid) {
                // 如果存在 uuid 的东西 ，证明就是微信扫码登录得到的
                bindWechatPhoneApi({
                    phone: this.phoneNum,
                    verifyCode: this.smsNum,
                    uuid: uuid,
                }).then((res) => {
                    if (res.data.code === 0) {
                        // 已经登录成功
                        // 存储token
                        localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                        // 提示登录成功
                        let toastObj = {
                            content: res.data.message,
                            icon: "success",
                        };
                        this.$store.dispatch("AsyncToast", toastObj);
                        // 关闭登录框
                        this.$store.commit('changeIsLogin', false)
                        // 更新header组件
                        this.$emit("updateKeyFn");
                        // 删除地址栏的code
                        this.$router.push(this.$route.path)
                        // 删除uuid
                        sessionStorage.removeItem('uuid')
                    }
                });
            } else {
                PhoneReginApi({
                    verifyCode: this.smsNum,
                    phone: this.phoneNum,
                }).then((res) => {
                    // console.log(res);
                    if (res.data.code === 0) {
                        // 存储token
                        localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                        // 提示登录成功
                        let toastObj = {
                            content: res.data.message,
                            icon: "success",
                        };
                        this.$store.dispatch("AsncToast", toastObj);
                        // 关闭登录框
                        this.$store.commit('changeIsLogin', false);
                        // 更新header组件
                        this.$emit("updateKeyFn");
                    }
                });
            }
            PhoneReginApi({
                verifyCode: this.smsNum,
                phone: this.phoneNum,
            }).then((res) => {
                // console.log(res);
                if (res.data.code === 0) {
                    // 存储token
                    localStorage.setItem("x-auth-token", res.data["x-auth-token"]);
                    // 提示登录成功
                    let toastObj = {
                        content: res.data.message,
                        icon: "success",
                    };
                    this.$store.dispatch("AsncToast", toastObj);
                    // 关闭登录框
                    this.$store.commit('changeIsLogin', false);
                    // 更新header组件
                    this.$emit("updateKeyFn");
                }
            });
        }

    }
}
</script>
 
<style lang = "less" scoped>
@import "../assets/base.less";

.modal {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 99;

    .modal_bg {
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.4);
        z-index: -10;
    }

    .modal_content {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        width: 555px;
        height: 423px;
        // background: #fff;
        background-image: url(../assets/images/login/loginBg.png);

        .close {
            position: absolute;
            top: 20px;
            right: 60px;
        }

        section {
            display: flex;
            justify-content: center;
            padding-top: 50px;
            margin-bottom: 30px;

            span {
                color: #ccc;
                cursor: pointer;

                &:nth-of-type(1) {
                    border-right: 1px solid #ccc;
                    padding-right: 10px;
                    margin-right: 10px;
                }

                &.active {
                    color: #333;
                }
            }
        }

        .line {
            width: 360px;
            margin: 0 auto 20px;
            height: 50px;

            input {
                flex: 1;
                text-indent: 1em;
                outline: none;
            }

            .btn {
                width: 90px;
                height: 50px;
                text-align: center;

                span {
                    display: block;
                    width: 90px;
                    height: 50px;
                    background: @blue;
                    color: #fff;
                    cursor: pointer;
                    line-height: 50px;
                    margin-left: 10px;
                }

                .daojis {

                    width: 90px;
                    height: 50px;
                    background: #333;
                    // color: #333;
                }
            }
        }

        .btn_login {
            width: 360px;
            height: 50px;
            text-align: center;
            background: @blue;
            color: #fff;
            cursor: pointer;
            line-height: 50px;
            margin: auto;
        }

        .verify_box {
            width: 360px;
            margin: 0 auto 20px;

            /deep/.slide-verify {
                width: 100% !important;

                canvas {
                    position: absolute;
                    top: -150px;
                    left: 0;
                    display: none;
                    box-sizing: border-box;
                }

                &:hover {
                    canvas {
                        display: block;
                    }
                }
            }
        }
    }
}

#weixin {
    width: 300px;
    margin: 0 auto;

}
</style>